<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人财务记账系统</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        body {
            margin-top: 0px;
        }

        .index-container {
            margin: 0px auto; /*设置DIV水平居中*/
            width: 90%;
            border: 0px solid red;
        }

        .el-header, .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
        }

        .el-main {
            background-color: #fff;
            color: #333;
        }

        body > .el-container {
            margin-bottom: 40px;
        }

        /**卡片展示样式*/
        .image {
            width: 100%;
            height: 300px;
            display: block;
        }
    </style>

</head>
<body>
<div id="index-container" class="index-container">
    <!--使用上中下布局容器-->
    <el-container>
        <el-aside width="200px">
            <el-row class="tac">
            <el-col :span="12">
                <el-menu default-active="5" class="index-container" >
                    <el-menu-item index="1">
                        <span  @click="btnClick(1)">财务信息</span>
                    </el-menu-item>
                    <el-menu-item index="2" >
                        <span  @click="btnClick(2)">当前月的财务状况</span>
                    </el-menu-item>
<!--                    <el-menu-item index="3">-->
<!--                        <span  @click="btnClick(3)">时间段的财务状况</span>-->
<!--                    </el-menu-item>-->
                    <el-menu-item index="4">
                        <span  @click="btnClick(4)">月度财务状况</span>
                    </el-menu-item>
                    <el-menu-item index="5">
                        <span  @click="btnClick(5)">年度财务状况</span>
                    </el-menu-item>
                    <el-menu-item index="6">
                        <span  @click="loginOut()">退出</span>
                    </el-menu-item>
                </el-menu>
            </el-col>
        </el-row>
        </el-aside>
    <el-container>
        <el-header>个人财务记账系统-年度财务状况</el-header>
        <el-main>
            <el-table :data="financialRecordList" style="width: 100%">

                </el-table-column>
                <el-table-column prop="recordId" label="记账记录Id" width="180" >
                </el-table-column>
                <el-table-column prop="category" label="记账类型" width="180" >
                </el-table-column>
                <el-table-column prop="amount" label="记账金额" >
                </el-table-column>
                <el-table-column prop="description" label="记账描述" >
                </el-table-column>
                <el-table-column prop="recordDate" label="记账日期" >
                </el-table-column>
            </el-table>
        </el-main>
        <el-footer></el-footer>
    </el-container>
    </el-container>
</div>
<!--先引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<!--再引入饿了么UI-->
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<!--引入axios组件-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>


<script>
    new Vue({
        el: '#index-container',
        data() {
            return {
                financialRecordList:  []//声明用于存放商品列表的数组
            }
        },
        methods: {
            loginOut(){
                window.location.href = '/PFSystem/login.html';
            },
            btnClick(index){
                let urlParams = new URLSearchParams(window.location.search);
                let userId = urlParams.get('userId');
                switch (index){
                    case 1:
                        window.location.href = '/PFSystem/financialRecord.html?userId='+userId;
                        break;
                    case 2:
                        window.location.href = '/PFSystem/financialRecordCurrentMonth.html?userId='+userId;
                        break;
                    // case 3:
                    //     window.location.href = '/PFSystem/financialRecordTimeSlot.html?userId='+userId;
                    //     break;
                    case 4:
                        window.location.href = '/PFSystem/financialRecordMonthly.html?userId='+userId;
                        break;
                    case 5:
                        window.location.href = '/PFSystem/financialRecordYear.html?userId='+userId;
                        break;
                }
            },
            /**
             * 获得商品的列表
             */
            getFinancialRecordList() {
                let urlParams = new URLSearchParams(window.location.search);
                let userId = urlParams.get('userId');
                axios.get('FinancialRecordYear/QueryFinancialRecordYearList?userId='+userId)
                    .then(response => {
                        //获得服务端返回的数据,并设置到financialRecordList数组中
                        this.financialRecordList = response.data;
                        // console.log(this.financialRecordList)
                    })
                    .catch(err => {
                        alert(err)
                    });
            },
            /**
             * 截取图书的名称，如果名称的长度大于15则截取
             * @param description
             */
            subDescription(description) {
                if (description.length > 10) {
                    description = description.substring(0, 10);
                }
                return description;
            }
        },
        //钩子函数-在页面dom构建之后立马执行
        created() {
            this.getFinancialRecordList();
        }
    })
</script>
</body>
</html>